<template>
    <div class="login-box">
      <van-form @submit="onSubmit" class="log-on">
        <div class="log-tityou" @click="router.push('/l/regis')">注册</div>
        <div class="log-title">手机号验证登录</div>
        <van-cell-group inset>
          <van-field v-model="username" name="用户名" placeholder="用户名：qqq" />
          <van-field v-model="regvalue" type="验证码" name="验证码" placeholder="验证码：qqq" />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" style="margin-top:30px;">
            提交
          </van-button>
        </div>
        <div style="text-align: center;font-size: 14px;color: #666EE8;margin-top:20px;" @click="router.push('/l/login')">密码登录</div>
      </van-form>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { closeToast, showLoadingToast ,showToast } from 'vant';
import {useRouter} from 'vue-router'

const router=useRouter()

const username = ref('');
const regvalue = ref('');
const onSubmit = (values) => {
  console.log(values.用户名);
  if(values.用户名&&values.验证码){
    showLoadingToast('验证中...');
    setTimeout(() => {
      closeToast();
      showToast('登陆成功---');
      localStorage.setItem("access_token",JSON.stringify('token:xxx xxxxxxxxxxxxxxxxxxxxxx'))
      setTimeout(()=>{
        router.push('/home')
      },1000)
    }, 1000);
  }else{
    showLoadingToast('验证中...');
    setTimeout(() => {
      closeToast();
      showToast('登陆失败！！！');
    }, 2000);
  }
  
  console.log('submit', values);
};
</script>

<style lang="scss" scoped>
  .login-box {
    height: 270px;
    width: 330px;
    background-color: #FFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;

    .log-on {
      height: 200px;
      width: 335px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .log-title {
    width: 200px;
    text-align: center;
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: bold;
    color: #fff;
  }
  .log-tityou {
    text-align: center;
    position: absolute;
    top: -60%;
    left: 90%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #fff;
  }
</style>